<template>
  <div class="container">
    <el-form class="login_form" :model="user" :rules="loginRules" ref="user" label-position="left" label-width="0px" v-loading="loadingflag" element-loading-text="页面跳转中">
     <h3 class="title">欢迎登录后台管理系统</h3>
     <el-form-item prop="account">
       <el-input type="text" v-model="user.account" auto-complete="off" placeholder="账号"></el-input>
     </el-form-item>
     <el-form-item prop="checkPass">
       <el-input type="password" v-model="user.checkPass" auto-complete="off" placeholder="密码"></el-input>
     </el-form-item>
      <el-form-item style="width:100%;">
        <el-button class="login_button" type="primary" style="width:40%;" @click="handleSubmit">登录</el-button>
         <el-button class="login_button" type="primary" style="width:40%;" @click="toReg">注册</el-button>
      </el-form-item>
  </el-form>
</div>
</template>

<script>
export default {
  data() {
    //自定义验证函数
        // 返回的数据
        return {
          logining: false,
          user: {
            account: '',
            checkPass: '',
          },
          loginRules: {
            account: [
              { required:true,message:"账号不能为空", trigger: 'blur' },
            ],
            checkPass: [
              { required: true, message: '请输入密码', trigger: 'blur' },
            ],
          },
          loadingflag:false
        };
      },
      methods: {
        handleSubmit() {
            this.$refs.user.validate((valid) => {
              if (valid) {
                this.$store.dispatch('UserLogin',this.user);
              } else {
                // 这个else只是防止什么都没填写
                console.log('error submit!!');
                return false;
              }
            });

        },
        toReg(){
           this.$router.push({path:'/reg'})
        }
      }
    }
</script>

<style scoped>
  .el-form-item{
    text-align: center;
  }
</style>
